<script>
import ImgSet from '../ImgSet.vue';
import { useDimModel, useParams } from './hook';
import DimensionsSelector from '/@/components/common/dimensionsSelector/DimensionsSelector.vue';
export default {
	name: 'Dimensions',
	props: {
		framePic: {
			type: String,
			default: '',
		},
		dimensionList: {
			type: Array,
			default: () => [],
		},
	},
	components: {
		ImgSet,
		DimensionsSelector,
	},
	setup(props, { emit }) {
		const framePicArr = computed({
			get() {
				return JSON.parse(props.framePic || '[]');
			},
			set(val) {
				emit('update:framePic', JSON.stringify(val || []));
			},
		});
		const dimensionListArr = computed({
			get() {
				return props.dimensionList;
			},
			set(val) {
				console.log(val);
				emit('update:dimensionList', val);
			},
		});
		return {
			...useDimModel(dimensionListArr),
			...useParams(dimensionListArr),
			framePicArr,
			dimensionListArr,
		};
	},
};
</script>
<template>
	<div class="Dimensions">
		<p>线框图</p>
		<ImgSet v-model="framePicArr" />
		<el-button class="add_btn" type="primary" @click="addModel">新增维度模块</el-button>
		<ul>
			<li v-for="(item, index) in dimensionListArr" :key="index">
				<el-card class="box-card" shadow="hover">
					<div class="form_item">
						<div class="label">小标题</div>
						<el-input v-model="dimensionListArr[index].title" maxlength="200"></el-input>
						<el-button type="danger" class="del_model_btn" @click="delModel(index)">删除模块</el-button>
					</div>
					<el-button type="primary" class="add_btn" @click="addParam(index)">新增参数</el-button>
					<el-table :data="dimensionListArr[index].attrVoList">
						<el-table-column label="参数名">
							<template #default="scope">
								<DimensionsSelector v-model:attrName="scope.row.attrName" />
							</template>
						</el-table-column>
						<el-table-column label="值">
							<template #default="scope">
								<el-input v-model="scope.row.attrValue" maxlength="200"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="60px" fixed="right">
							<template #default="scope">
								<el-button @click="toDel(index, scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</li>
		</ul>
	</div>
</template>

<style lang="scss" scoped>
.Dimensions {
	.ImgSet {
		margin: 10px 0;
	}
	.add_btn {
		margin-bottom: 20px;
	}
	ul {
		li {
			width: 50%;
			margin-bottom: 20px;
			.form_item {
				display: flex;
				margin-bottom: 20px;
				.label {
					width: 60px;
					line-height: 24px;
				}
				.del_model_btn {
					margin-left: 10px;
				}
			}
		}
	}
}
</style>
